<!DOCTYPE html>
<html>
<head>
	<title>非父子组件的值传递（消息总线/发布订阅/观察者模式）</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>	
	<div id="app">
		<child content="Lee"></child>
		<child content="Dell"></child>
	</div>
	<script>
		//在每个vue的实力当中挂在一个bus属性
		Vue.prototype.bus = new Vue();

		Vue.component('child' , {
			data : function() {
				return {
					selfContent : this.content
				}
			},
			props : {
				content : String
			},
			template : '<div @click="handlerClick">{{selfContent}}</div>',
			methods : {
				handlerClick : function() {
					//发布消息到总线
					this.bus.$emit('chang' , this.selfContent)
				}
			},
			mounted : function() {
				//vue挂在之后被触发的方法
				//监听总线的消息
				//保留this的引用
				var _this = this;
				this.bus.$on('chang' , function(msg) {
					_this.selfContent = msg;
				});
			}
		});

		var app = new Vue({
			el : '#app' ,
			
		});
	</script>
</body>
</html>